<template>
	<div>
		<NavigationBar title-text="挂号记录" :custom-back-func="handleNavigateBack" />
		<Message ref="message" />
		<Loading ref="loading" fullscreen />

		<div class="doctor-depart-container w-full pt-160rpx pb-0rpx px-0rpx bg-hex-a0cfff overflow-x-hidden">
			<div class="w-full min-h-90vh flex-column bg-hex-f4f4f5 overflow-x-hidden">
				<div class="p-30rpx" v-if="registeredList.length>0">
					<div
						class="order-item w-full mb-20rpx p-30rpx flex-column bg-white rounded-xl"
						v-for="item in registeredList"
						:key="item.id"
						@click="gotoDetail(item.id)"
					>
						<div class="w-full flex items-center justify-between">
							<div>
								<div>科室分类：{{ item.classify }}</div>
							</div>
							<div class="flex-grow-1 text-center font-bold">{{ item.userName }}</div>
						</div>
						<div class="w-full flex items-center justify-between mt-10rpx">
							<div>科室：{{ item.name }}</div>
                            <div>{{formnumber(item.state)  }}</div>
						</div>
					</div>
				</div>
                <div v-else class="h-500rpx w-full flex items-center justify-center">
                     <div class="text-30rpx">暂无信息</div>
                </div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import Message from '@/components/message/src/message.vue';
import type { MessageMethod } from '@/components/message';
import Loading from '@/components/loading/src/loading.vue';
import type { LoadingMethod } from '@/components/loading';
import NavigationBar from '@/components/navigation-bar/src/navigation-bar.vue';
import { gotoPage } from '@/common/utils';
import { useUserStore } from '@/store';
import { userApi, serveApi } from '@/service/api';

const userStore = useUserStore();
const { userInfo } = storeToRefs(useUserStore());
const message = ref<InstanceType<typeof Message> & MessageMethod>(null);
const loading = ref<InstanceType<typeof Loading> & LoadingMethod>(null);
const userId = computed((): number | null => userInfo.value?.userId ?? null) //我的用户ID
const classify = ref<string>('');
const role = ref<string>('');
const registeredList = ref([]);
// 初始化
const init = async () => {
	const res = await serveApi.getRegistered({ userId: userId.value });
	console.log(res.data?.result);
	registeredList.value = res.data?.result;
};
// 跳转预约页面
const gotoDetail = useThrottleFn(
	(id): void => {
		gotoPage(`/pages/interrogation/interrogation?id=${id}`)
	},
	2000,
	false,
	true
);

const formnumber = (num:number)=>{
    switch(num){
        case 0:
            return '已取消'
        case 1:
            return '已完成'
        case 2:
            return '待完成'
    }
}

onLoad((option) => {
		init();
});
onShow(() => {
    init();
});
</script>

<style scoped lang="scss">
@import 'my-registered';
</style>
